﻿<Window x:Class="Microsoft.Samples.Kinect.KinectExplorer.KinectWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Microsoft.Samples.Kinect.KinectExplorer"
        xmlns:kt="clr-namespace:Microsoft.Samples.Kinect.WpfViewers;assembly=Microsoft.Samples.Kinect.WpfViewers"
        Title="Kinect Explorer" Width="812" Height="768">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Microsoft.Samples.Kinect.WpfViewers;component/KinectControlResources.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <local:KinectWindowsViewerSwapCommand x:Key="SwapCommand"/>
        </ResourceDictionary>
    </Window.Resources>
    <Window.CommandBindings>
        <CommandBinding Command="{StaticResource SwapCommand}" Executed="Swap_Executed"/>
    </Window.CommandBindings>
    <Window.InputBindings>
        <KeyBinding Key="Back"  Command="{StaticResource SwapCommand}"/>
    </Window.InputBindings>

    <Grid Name="layoutGrid" Margin="10 0 10 0" TextBlock.FontFamily="{StaticResource KinectFont}">        
        <Grid.RowDefinitions>
            <!-- The title bar -->
            <RowDefinition Height="Auto"/>
            <!-- The main viewer -->
            <RowDefinition Height="*" MinHeight="300"/>
            <!-- The audio panel -->
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!-- The main viewer -->
            <ColumnDefinition Width="*" MinWidth="400"/>
            <!-- The side panels -->
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <DockPanel Grid.Row="0" Grid.ColumnSpan="2" Margin="10 0 10 20">
            <Image DockPanel.Dock="Left" Source="Images\Logo.png" Stretch="None" HorizontalAlignment="Left" Margin="0 10 0 0"/>
            <TextBlock DockPanel.Dock="Right" 
                       HorizontalAlignment="Right" 
                       VerticalAlignment="Bottom" 
                       Foreground="{StaticResource TitleForegroundBrush}" FontSize="{StaticResource LabelFontSize}">Kinect Explorer</TextBlock>
            <Image Source="Images\Status.png" Stretch="None" HorizontalAlignment="Center"/>
        </DockPanel>

        <!-- The main viewer -->
        <Grid Grid.Column="0" Grid.Row="1" Margin="10" >
            <Grid Name="MainViewerHost">
                <Grid Name="ColorVis" Background="{StaticResource DarkNeutralBrush}">
                    <Viewbox HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform">
                        <!-- Make the colorViewer and skeletonViewer overlap entirely. -->
                        <Grid>
                            <kt:KinectColorViewer x:Name="ColorViewer" KinectSensorManager="{Binding KinectSensorManager}" CollectFrameRate="True" RetainImageOnSensorChange="True" />
                            <Canvas>
                                <kt:KinectSkeletonViewer 
                                    KinectSensorManager="{Binding KinectSensorManager}"
                                    Visibility="{Binding KinectSensorManager.ColorStreamEnabled, Converter={StaticResource BoolToVisibilityConverter}}"
                                    Width="{Binding ElementName=ColorViewer,Path=ActualWidth}"
                                    Height="{Binding ElementName=ColorViewer,Path=ActualHeight}"
                                    ImageType="Color" />
                            </Canvas>
                        </Grid>
                    </Viewbox>
                    <Border 
                        TextBlock.Foreground="{StaticResource LabelForegroundBrush}" 
                        HorizontalAlignment="Right" VerticalAlignment="Top" 
                        Background="{StaticResource MediumNeutralBrush}"
                        Width="50" Height="50">
                        <StackPanel Orientation="Vertical" >
                            <TextBlock FontSize="{StaticResource HeaderFontSize}" Text="{Binding ElementName=ColorViewer, Path=FrameRate}" HorizontalAlignment="Center" Margin="-2"/>
                            <TextBlock FontSize="{StaticResource FPSFontSize}" HorizontalAlignment="Center" Margin="-2">FPS</TextBlock>
                        </StackPanel>
                    </Border>                   
                    <Rectangle Fill="#7777" Visibility="{Binding KinectSensorManager.ColorStreamEnabled, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter=True}" SnapsToDevicePixels="True"/>
                </Grid>
            </Grid>
        </Grid>

        <!-- The Audio panel -->
        <Grid Grid.Row="2" Grid.Column="0"
              Margin="10 10 10 20"
              VerticalAlignment="Top">
            <kt:KinectAudioViewer 
                x:Name="kinectAudioViewer" 
                HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch"
                SnapsToDevicePixels="True"
                KinectSensorManager="{Binding KinectSensorManager}"/>
        </Grid>
        
        <!-- The side panels-->
        <StackPanel 
            Orientation="Vertical" 
            Grid.Column="1" 
            Grid.Row="1" 
            Grid.RowSpan="2" 
            Margin="10"
            HorizontalAlignment="Left">
            <Grid Name="SideViewerHost" Width="240" Height="180">
                <Grid Name="DepthVis" Background="{StaticResource DarkNeutralBrush}">
                    <Viewbox Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <!-- Make the depthViewer and skeletonViewer overlap entirely. -->
                        <Grid>
                            <kt:KinectDepthViewer 
                            x:Name="DepthViewer"
                            KinectSensorManager="{Binding KinectSensorManager}"
                            DepthTreatment="{Binding DepthTreatment}"
                            CollectFrameRate="True" 
                            RetainImageOnSensorChange="True"/>
                            <Canvas>
                                <kt:KinectSkeletonViewer 
                                KinectSensorManager="{Binding KinectSensorManager}"
                                Visibility="{Binding KinectSensorManager.DepthStreamEnabled, Converter={StaticResource BoolToVisibilityConverter}}"
                                Width="{Binding ElementName=DepthViewer, Path=ActualWidth}"
                                Height="{Binding ElementName=DepthViewer, Path=ActualHeight}"
                                ShowBones="true" ShowJoints="true" ShowCenter="true" ImageType="Depth" />
                            </Canvas>
                        </Grid>
                    </Viewbox>
                    <Border 
                        TextBlock.Foreground="{StaticResource LabelForegroundBrush}" 
                        HorizontalAlignment="Right" VerticalAlignment="Top" 
                        Background="{StaticResource MediumNeutralBrush}"
                        Width="50" Height="50">
                        <StackPanel Orientation="Vertical" >                            
                            <TextBlock FontSize="{StaticResource HeaderFontSize}" Text="{Binding ElementName=DepthViewer, Path=FrameRate}" HorizontalAlignment="Center" Margin="-2"/>
                            <TextBlock FontSize="{StaticResource FPSFontSize}" HorizontalAlignment="Center" Margin="-2">FPS</TextBlock>
                        </StackPanel>
                    </Border>
                    <Rectangle Fill="#7777" Visibility="{Binding KinectSensorManager.DepthStreamEnabled, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter=True}" SnapsToDevicePixels="True"/>
                </Grid>
                <Button HorizontalAlignment="Left" VerticalAlignment="Top" Command="{StaticResource SwapCommand}">
                    <Button.Template>
                        <ControlTemplate>
                            <Border Width="50" Height="50">
                                <Border.Style>
                                    <Style>
                                        <Style.Setters>
                                            <Setter Property="Border.Background" Value="{StaticResource MediumNeutralBrush}"/>
                                        </Style.Setters>
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.TemplatedParent}, Path=IsMouseOver}" Value="True">
                                                <Setter Property="Border.Background" Value="{StaticResource DarkNeutralBrush}"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Border.Style>
                                <Image Source="Images/swap.png"/>
                            </Border>
                        </ControlTemplate>
                    </Button.Template>
                </Button>                
            </Grid>

            <kt:KinectSettings KinectSensorManager="{Binding KinectSensorManager}" DepthTreatment="{Binding DepthTreatment, Mode=TwoWay}" Margin="0 20 0 0" SnapsToDevicePixels="True"/>

        </StackPanel>

    </Grid> 
</Window>
